<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特色功能</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
</head>

<style>

    /*https://fkwzlsj05.jz.fkw.com/?previewDemo=true      关于我们 我们的优势*/
    .feature_title {
        text-align: center;
    }

    .feature_title h2 {
        color: var(--c_text);
        font-size: var(--f_title);
        line-height: var(--l_title);
    }

    .feature_title p {

        color: var(--c_subtitle);
        font-size: var(--f_describe);
        line-height: var(--l_describe);
        margin-top: 22px;
    }

    .feature_list {
        margin-top: 60px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .feature_list ul li {
        margin: 40px 0;
    }

    .feature_list ul li:nth-child(2) {
        margin-top: 60px;
    }

    .feature_list ul li p:nth-child(1) {
        color: var(--c_text);
        font-size: var(--f_subtitle);
        line-height: var(--l_title)
    }

    .feature_list ul li p:nth-child(2) {
        color: var(--c_subtitle);
        font-size: var(--f_text);
        line-height: var(--l_text);
        margin-top: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }

    .feature_left {
        width: 33.33%;
        padding: 0 40px 0 0;
    }

    .feature_center {
        width: 33.33%;
    }

    .feature_center_img_box {
        height: 466px;
    }

    .feature_center_img_box img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .feature_right {
        padding: 0 0 0 40px;
        width: 33.33%;
    }

    @media(max-width:1200px) {

        .feature_title p {
            margin-top: 10px;
        }

        .feature_list {
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .feature_list ul li {
            margin: 20px 0;
        }

        .feature_list ul li:nth-child(2) {
            margin-top: 20px;
        }

        .feature_list ul li p:nth-child(2) {
            margin-top: 14px;
        }

        .feature_left {
            width: 100%;
            padding: 0 0 0 0;
        }

        .feature_left ul {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .feature_left ul li {
            width: 50%;
        }

        .feature_left ul li:nth-child(2) {
            padding: 0 0 0 40px;
        }

        .feature_center {
            display: none;
        }

        .feature_right {
            padding: 0 0 0 0;
            width: 100%;
        }
        .feature_right ul{
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }
        .feature_right ul li{
            width: 50%;

        }
        .feature_right ul li:nth-child(2){
            padding: 0 0 0 40px;
        }
    }
    @media(max-width:768px){

        .feature_left ul {
            flex-wrap: wrap;
        }

        .feature_left ul li {
            width: 100%;
        }
        .feature_left ul li:nth-child(2) {
            padding: 0 0 0 0;
        }
        .feature_right ul{
            flex-wrap: wrap;
        }
        .feature_right ul li{
            width: 100%;

        }
        .feature_right ul li:nth-child(2){
            padding: 0 0 0 0;
        }
    }
</style>

<body>

    <div class="feature modular">
        <div class="feature_title">
            <h2>我们的优势</h2>
            <p>Our Advantage</p>
        </div>
        <div class="feature_list public_width">
            <div class="feature_left">
                <ul>
                    <li>
                        <p>A. 策划</p>
                        <p>倾听客户的传播需求与目的，并将规划成适宜在空间中呈现的设计策略。
                            倾听客户的传播需求与目的，并将规划成适宜在空间中呈现的设计策略。
                        </p>

                    </li>
                    <li>
                        <p>B. 设计</p>
                        <p>拥有多位创意全面经验丰富的资深设计师，提供展览，活动策划，巡展，办公商业空间等全方位创意设计</p>
                    </li>
                </ul>
            </div>
            <div class="feature_center">
                <div class="feature_center_img_box">
                    <img src="../images/img_collection_5_3.png" alt="">
                </div>

            </div>
            <div class="feature_right">
                <ul>
                    <li>
                        <p>C. 执行</p>

                        <p>
                            倾听客户的传播需求与目的，并将规划成适宜在空间中呈现的设计策略。
                            倾听客户的传播需求与目的，并将规划成适宜在空间中呈现的设计策略。精确务实的执行力，并不断探索新的材质和施工工艺加以运用，将客户的利益发挥较大的效果。</p>
                    </li>
                    <li>
                        <p>D. 服务</p>
                        <p>专人专属的服务模式，针对个别专案采取团队服务模式，为客户提供专业细微的服务品质。</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>